import React from "react"
import { useLocation } from "react-router-dom"
import { NavBar, Collapse, Button } from "antd-mobile"
import { useSelector, useDispatch } from "react-redux"
import { beforeDate, afterDate } from "../../store/slice.js"
import "./index.css"
function Index() {
  const dispathc = useDispatch()
  const { state } = useLocation()
  const { date } = useSelector(state => state.counter)
  const seatClass = ["二等座", "一等座", "商务座"]
  // 票价
  const price = [state.tick.secondTick, state.tick.firstTick, state.tick.vip]
  return (
    <div className="continaer">
      <NavBar style={{ background: "#1ba9ba", color: "#fff" }}>G107</NavBar>
      <div className="date_city">
        <span onClick={() => dispathc(beforeDate(-1))}>前一天</span>
        <span>{date}</span>
        <span onClick={() => dispathc(afterDate(1))}>后一天</span>
      </div>
      <div className="city-detail">
        <div className="city-flex">
          <span>{state.start}</span>
          <span>G107</span>
          <span>{state.end}</span>
        </div>
        <div className="city-flex">
          <span>7:25</span>
          <span>
            ——<span style={{ color: "#1ba9ba" }}>时刻表</span>——
          </span>
          <span>13:12</span>
        </div>
        <div className="city-flex">
          <span>07-30周三</span>
          <span>耗时5时47分</span>
          <span>07-30周三</span>
        </div>
      </div>
      <Collapse>
        {seatClass.map((item, index) => (
          <Collapse.Panel
            arrowIcon={
              <Button
                style={{ borderColor: "#fda74a", borderWidth: 3 }}
                size="mini">
                收起
              </Button>
            }
            key={index}
            title={
              <div>
                <span>{item}</span>
                <span style={{ color: "#fda74a" }}>￥{price[index]}</span>
              </div>
            }></Collapse.Panel>
        ))}
      </Collapse>
    </div>
  )
}

export default Index
